<template>
  <div class="content-wrap" ref="contentBlock">
    <div class="content-block" >
      <labelColumns v-if="label">{{ label }}</labelColumns>
      <div class="content" :style="{height: scrollerHeight}">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import labelColumns from '@/components/labers/labelColumns'

export default {
  name: 'contentBlock',
  components: {
    labelColumns,
  },
  props: {
    label: {
      type: String,
      default: null,
    },
    theLastOne: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      scrollerHeight: '',
    }
  },
  mounted () {
    this.scrollerHeight = this.adjust
  },
  updated () {
    this.scrollerHeight = this.adjust
  },
  computed: {
    adjust () {
      // 获取屏幕高度
      const screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

      // 获取 overallLayout 元素，并进行检查
      const overallLayout = document.getElementsByClassName('overallLayout')[0];
      if (!overallLayout) return ''; // 如果没有找到 overallLayout，返回空字符串
      const height = overallLayout.clientHeight;

      // 初始化 adjustHeight
      let adjustHeight = '';

      // 只有当 this.theLastOne 为真时，才继续进行调整
      if (this.theLastOne) {
        // 如果 overallLayout 的高度小于屏幕高度，则进行调整
        if (height < screenHeight) {
          // 确保 contentBlock 已经渲染并且存在
          const contentBlock = this.$refs.contentBlock;
          if (!contentBlock) return ''; // 如果没有找到 contentBlock，返回空字符串

          // 如果有 label，则调整高度
          if (this.label) {
            adjustHeight = screenHeight - height + contentBlock.offsetHeight - 40 + 'px';
          } else {
            adjustHeight = screenHeight - height + contentBlock.offsetHeight + 'px';
          }
        }
      }

      // 返回最终的调整高度
      return adjustHeight;
    },
  },
}
</script>

<style scoped type="text/css" lang="css">
.content-wrap{
  overflow: hidden;
  background: #fff;
  padding: 0 16px;
  margin-bottom: 16px;
  display: block;
  border-radius: 4px;
  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.20);
}
.content-block{
  background: #FFFFFF;
  border-radius: 4px;
  //margin: 8px 0;
}
.content{
  /*background: url(../commImg/shuiyin_pro.png) repeat;*/
  padding: 16px 0 8px 0;
  overflow: hidden;
}
/*整体布局*/
.overallLayout {
  /*  用margin会撑开页面高度，导致出现滚动条,
  为了使用padding，改变了背景颜色*/
  /*margin:12px 20px 12px 20px;*/
  /*background-color:#ffffff;*/
  /*padding: 18px 18px 64px 18px;*/
  padding: 18px;
  background-color:#F0F2F5;
}
</style>
